<!-- TODO:贴图的加载 -->
<html>
<head>
    <meta charset="utf-8">
    <title>创建纹理贴图</title>
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        canvas {
            position: absolute;
            display: block;
        }
    </style>
    <script src="../js/three.js"></script>
</head>

<body style="width: 100%; height: 100%">

    <script>
        //创建一个场景
        var scene = new THREE.Scene();//创建一个场景
        //纹理贴图映射到一个矩形平面上
        var geometry = new THREE.BoxGeometry(200, 200, 200);//矩形平面
        //TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
        var textureLoader = new THREE.TextureLoader();
        //执行load方法,加载纹理贴图成功后,返回一个纹理对象Texture
        textureLoader.load(
            '../static/三角函数.png', 
            function (texture) {
            var material = new THREE.MeshLambertMaterial({
                //color: 0x0000ff,
                //设置颜色纹理贴图:Texture对象作为材质map属性的属性值
                map: texture,//设置颜色贴图属性值
            });
            var mesh = new THREE.Mesh(geometry, material);//网格模型对象Mesh
            scene.add(mesh);//网格模型添加到场景中
            //点光源

            var point = new THREE.PointLight(0xffffff);
            point.position.set(400, 200, 300);//点光源位置
            scene.add(point);//点光源添加到场景中

            var width = window.innerWidth;//窗口宽度
            var height = window.innerHeight;//窗口高度
            var k = width / height;//窗口宽高比
            var s = 300;//三维场景显示范围控制系数,系数越大,显示的范围越大
            //创建相机对象
            var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
            camera.position.set(200, 300, 100);//设置相机位置
            camera.lookAt(scene.position);//设置相机方向(指向的场景对象)

            var renderer = new THREE.WebGLRenderer();//创建渲染器
            //应用程序里设置一个渲染器的尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0xb9d3ff, 1);
            //将renderer(渲染器)的dom元素(renderer.domElement)添加到我们的HTML文档中
            document.body.appendChild(renderer.domElement);
            renderer.render(scene, camera)
        });

    </script>
</body>

</html>